// Name:            Button
// Description:     Defines styles for buttons
//
// Component:       `.am-btn`
//
// Sub-objects:     `.am-btn-group`
//                  `.am-btn-dropdown`
//
// Modifiers:       `.am-btn-default`
//                  `.am-btn-primary`
//                  `.am-btn-warning`
//                  `.am-btn-success`
//                  `.am-btn-danger`
//                  `.am-btn-secondary`
//                  `.am-btn-link`
//                  `.am-btn-sm`
//                  `.am-btn-lg`
//                  `.am-btn-xs`
//                  `.am-btn-block`
//
// States:          `am-active`
//                  `am-disabled`
//
// ========================================================================


/* ========================================================================
   Component: Button
 ========================================================================== */


// Core styles

.am-btn {
  display: inline-block;
  margin-bottom: 0; // for input.am-btn
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 0.625em 1em; // relative font size
  border-radius: @global-border-radius;
  line-height: @btn-line-height;
  font-size: @btn-font-size;
  .user-select(none);
  .transition(width 0.15s);

  &:focus {
    .tab-focus();
  }

  &:hover,
  &:focus {
    color: @btn-default-color;
    text-decoration: none;
  }

  &:active,
  &.am-active {
    outline: 0;
    background-image: none;
    .box-shadow(inset 0 1px 5px rgba(0,0,0,.125));
  }

  &.am-disabled,
  &[disabled],
  fieldset[disabled] & {
    // https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
    pointer-events: none; // Disable mouse events
    border-color: transparent;
    cursor: not-allowed; // may not styled because pointer-events: none;
    .opacity(.45);
    .box-shadow(none);
  }

}


/* Modifiers */

.am-btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

.am-btn-primary {
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

.am-btn-warning {
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}

.am-btn-danger {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

.am-btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}

.am-btn-secondary {
  .button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border);
}


/* Style links like a button */

.am-btn-link {
  color: @link-color;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;

  &,
  &:active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    .box-shadow(none);
  }
  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  &:hover,
  &:focus {
    color: @link-hover-color;
    text-decoration: underline;
    background-color: transparent;
  }
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: @btn-link-disabled-color;
      text-decoration: none;
    }
  }
}


/* button size */

.am-btn-lg {
  .button-size(@btn-lg-font-size);
}
.am-btn-sm {
  .button-size(@btn-sm-font-size);
}
.am-btn-xs {
  .button-size(@btn-xs-font-size);
}


/* Block button  */

.am-btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}


/* Multiple block buttons vertically space */

.am-btn-block + .am-btn-block {
  margin-top: 5px;
}


/* Specificity overrides */

input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.am-btn-block {
    width: 100%;
  }
}


/* Button with loading spinner */

.am-btn.am-btn-loading {
  .am-icon-spin {
    margin-right: 5px;
  }
}
